.music-table-container {
  background-color: #fff;

  .loading {
    width: 100%;
    height: 26px;
    padding: 20px 0;
    color: #999;
    text-align: center;

    .loading-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 2px;
      vertical-align: middle;
      background: url('@/assets/image/loading.gif') no-repeat;
    }
  }

  .play-list-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;

    th {
      height: 38px;
      font-weight: normal;
      color: #666;
      text-align: left;
      background: url('@/assets/image/icon-table.png');
      background-color: #f7f7f7;
      background-position: 0 0;
      background-repeat: repeat-x;

      .icon {
        display: inline-block;
        height: 18px;
        padding: 8px 10px;
        font-style: normal;
        line-height: 18px;
        background: url('@/assets/image/icon-table.png');
        background-position: 0 -56px;
      }
    }

    .first-th {
      width: 74px;
      height: 18px;

      .icon {
        display: none;
      }
    }

    .two-th {
      height: 18px;
      line-height: 18px;

      .icon::before {
        content: '歌曲标题';
      }
    }

    .three-th {
      width: 91px;
      height: 18px;
      line-height: 18px;

      .icon::before {
        content: '时长';
      }
    }

    .four-th {
      width: 20%;
      height: 18px;
      line-height: 18px;

      .icon::before {
        content: '歌手';
      }
    }

    td {
      padding-top: 5px;
      padding-bottom: 8px;
      padding-left: 10px;
      line-height: 18px;
      text-align: left;
      background-color: #fff;
    }

    .even-item td {
      background-color: #f7f7f7;
    }

    .tbody-left {
      padding-top: 5px;
      padding-bottom: 8px;
      padding-left: 10px;

      .hd {
        height: 18px;

        .icon-play {
          display: inline-block;
          width: 17px;
          height: 17px;
          vertical-align: middle;
          cursor: pointer;
          background: url('@/assets/image/icon-table.png');
          background-position: 0 -103px;
        }

        .active-play {
          background-position: -20px -128px;
        }

        .text {
          display: inline-block;
          width: 25px;
          margin-left: 5px;
          color: #999;
          vertical-align: middle;
        }
      }
    }

    .tbody-td {
      .hd {
        height: 18px;

        .icon-mv {
          display: inline-block;
          width: 23px;
          height: 17px;
          margin-top: -3px;
          vertical-align: middle;
          cursor: pointer;
          background: url('@/assets/image/icon-table.png');
          background-position: 0 -151px;

          &:hover {
            background-position: -30px -151px;
          }
        }

        .text {
          display: inline-block;
          height: 20px;
          max-width: 87%;
          padding-right: 25px;
          margin-right: -24px;
          overflow: hidden;
          color: #333;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
          cursor: pointer;

          .title:hover {
            text-decoration: underline;
          }

          .no-click {
            margin-left: 1px;
            color: #aeaeae;
            cursor: default;
          }
        }

        .operate-btn {
          display: inline-block;
          width: 98px;
          height: 28px;
          line-height: 28px;
          vertical-align: middle;
          visibility: hidden;

          .icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 10px;
            margin-left: 0;
            vertical-align: middle;
            cursor: pointer;
            background: url('@/assets/image/icon-table.png');
          }

          .add {
            width: 13px;
            height: 13px;
            background: url('@/assets/image/icon.png');
            background-position: 0 -700px;

            &:hover {
              background-position: -22px -700px;
            }
          }

          .collect {
            width: 18px;
            background-position: 0 -174px;

            &:hover {
              background-position: -20px -174px;
            }
          }

          .share {
            background-position: 0 -195px;

            &:hover {
              background-position: -20px -195px;
            }
          }

          .download {
            background-position: -81px -174px;

            &:hover {
              background-position: -104px -174px;
            }
          }

          .delete {
            margin-right: 0;
            background-position: 0 -217px;

            &:hover {
              background-position: -20px -217px;
            }
          }
        }
      }
    }

    .singer {
      .hd {
        max-width: 87%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .name {
          cursor: pointer;
        }

        .name:hover {
          text-decoration: underline;
        }
      }
    }

    .tbody tr:hover {
      .tbody-td {
        .hd {
          .time {
            display: none;
          }

          .operate-btn {
            width: 100%;
            height: auto;
            line-height: 18px;
            text-align: left;
            visibility: visible;

            .icon {
              margin-right: 4px;
            }
          }

          .text {
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    .no-copyright {
      &:hover {
        .tbody-td {
          .hd {
            .time {
              display: inline-block !important;
              text-decoration: none !important;
              vertical-align: middle;
              cursor: auto;
            }
          }
        }
      }

      .tbody-left {
        .hd {
          .icon-play {
            cursor: default;
            opacity: .5;
          }
        }
      }

      .tbody-td {
        .hd {
          color: #bbb;

          .text {
            color: #bbb;
          }

          .icon-mv {
            cursor: default;
            background: url('@/assets/image/icon-table.png');
            background-position: -60px -151px;
          }

          .operate-btn {
            .add {
              display: none;
            }

            .collect {
              display: none;
            }

            .share {
              display: none;
            }

            .download {
              display: none;
            }

            .delete {
              margin-right: 0;
              background-position: 0 -217px;
            }

            .delete:hover {
              background-position: -20px -217px;
            }
          }

          .name {
            color: #bbb;
          }

          .line {
            color: #bbb;
          }
        }
      }
    }
  }

  .no-data {
    padding: 95px 0;
    text-align: center;

    .title {
      width: 100%;
      padding-bottom: 16px;
      margin: 0 auto;
      font-size: 18px;
      color: #333;
      text-align: center;

      .icon {
        display: inline-block;
        width: 64px;
        height: 50px;
        margin-right: 17px;
        vertical-align: middle;
        background: url('@/assets/image/icon.png');
        background-position: 0 -347px;
      }

      .text {
        display: inline-block;
        vertical-align: middle;
      }
    }

    .desc {
      margin-top: 20px;
      color: #aaa;

      .text {
        display: inline-block;
        vertical-align: middle;
      }

      .link {
        display: inline-block;
        color: #0c73c2;
        vertical-align: middle;
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }

      .icon {
        display: inline-block;
        width: 16px;
        height: 14px;
        margin: 0 9px 0 7px;
        vertical-align: middle;
        background: url('@/assets/image/icon.png');
        background-position: 0 -400px;
      }

      .go {
        margin-right: 5px;
        margin-left: 10px;
      }
    }
  }
}
